import { useEffect, useRef, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import styles from './index.module.scss'
// import Son from './components/son'

function NotFound() {
  /**
   * 倒计时跳转页面实现：
   * 1. 定义倒计时时间变量：10s
   * 2. 利用js定时器，执行倒计时时间：每秒减一 =》组件挂载开启定时器
   * 3. == 倒计时时间等于0，跳转页面 ==
   */
  const nav = useNavigate()
  // 倒计时时间
  const [count, setCount] = useState(10)
  // 存储定时器ID
  const timer = useRef(0)
  useEffect(() => {
    // componetDidMount
    // 组件挂载定时器只开启一次
    timer.current = setInterval(() => {
      // setCount(count - 1)
      setCount((ct) => ct - 1)
    }, 1000)

    return () => {
      // componentWillUnMount
      console.log('组件销毁了')
      clearInterval(timer.current)
    }
  }, [])

  // 监听倒计时count变化
  useEffect(() => {
    if (count === 0) {
      nav('/')
    }
  }, [nav, count])

  return (
    <div className={styles.root}>
      {/* <Son /> */}
      <h1>对不起，您访问的页面不存在~</h1>
      <p>
        将在 {count} 秒后，返回首页（或者：点击立即返回
        <Link to="/">首页</Link>）
      </p>
    </div>
  )
}

export default NotFound
